import React, { PureComponent, Fragment } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  Divider,
  Table,
  Popconfirm,
  Spin,
  InputNumber,
  message,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import HOCSelect from '@/components/AntDesign/Select';
import styles from './style.less';

const { Option } = Select;
const { MonthPicker } = DatePicker;
const FormItem = Form.Item;

@Form.create()
@connect(({ injuryware, loading }) => ({
  injuryware,
  loading: loading.effects['injuryware/editCustName'],
}))
class AdvancedForm extends PureComponent {
  // 组件内所有数据的初始状态
  state = {
    listIndex: 1,
    accountCompletionStyle: 'hide',
    fieldsStyle: 'hide',
    doneFlag: '',
    initDoneFlag: '', // 初始化时doneflag
    mustFlag: true, // 字段名是否必填
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { injSecAccoId } = queryString.parse(location.search);
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['YES_NO_FLAG'],
    }).then(res => {
      dispatch({
        type: 'injuryware/updateModelData',
        payload: {
          yesNoFlag: res.YES_NO_FLAG,
        },
      });
    });

    dispatch({
      type: 'injuryware/getBigName',
      payload: {
        accoStatus: 2,
      },
    }).then(res => {
      if (res && res.success) {
        this.getDetailInfo(injSecAccoId);
      }
    });
  }

  getDetailInfo = injSecAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'injuryware/getDetailInfo',
      payload: {
        injSecAccoId,
      },
    }).then(res => {
      if (res.success) {
        this.setState({
          initDoneFlag: res.data.injSecAcco.doneFlag,
          doneFlag: res.data.injSecAcco.doneFlag,
        });
      }
    });
  };

  // 取消
  cancel = () => {
    router.goBack();
  };

  // 处理入参
  handleInparam = values => {
    const {
      injuryware: { detailInfo },
    } = this.props;
    const temp = values;
    Object.keys(values).forEach(key => {
      if (key === 'custList' && values[key]) {
        temp[key] = JSON.parse(
          JSON.stringify(values[key])
            .replace(new RegExp('key', 'g'), 'mdCustId')
            .replace(new RegExp('label', 'g'), 'mdCustName')
        );
      }
    });
    temp.insAccoName = detailInfo.insAccoName;
    temp.insAccoId = detailInfo.insAccoId;
    temp.injSecAccoId = detailInfo.injSecAccoId;
    temp.beginYm = values.beginYm ? values.beginYm.format('YYYYMM') : undefined;
    const tempList = detailInfo.ratioList.filter(item => item);
    tempList.forEach(item => {
      const newItem = item;
      delete newItem.key;
      if (item.beginYm) {
        newItem.beginYm = Number(item.beginYm);
      }
      if (item.endYm) {
        newItem.endYm = Number(item.endYm);
      }
    });
    temp.ratioList = tempList;
    const { mustFlag, initDoneFlag } = this.state;
    if (!mustFlag) {
      if (values.injSecAccoCode) {
        delete temp.injSecAccoCode;
      }
      if (values.feeRatio) {
        delete temp.feeRatio;
      }
      if (values.ratioList) {
        delete temp.ratioList;
      }
    }
    if (Number(initDoneFlag) === 1 && Number(detailInfo.state) === 2) {
      temp.doneFlag = 1;
    }
    return temp;
  };

  // 表单检测 并 提交
  submitAll = () => {
    const {
      dispatch,
      form,
      injuryware: { detailInfo },
    } = this.props;

    form.validateFieldsAndScroll((err, values) => {
      const newValues = JSON.parse(JSON.stringify(values));

      if (!err) {
        if (detailInfo.ratioList.some(item => !item.floatFeeRatio && item.floatFeeRatio !== 0)) {
          message.warning('浮动费率不能为空！');
          return;
        }

        if (values.custMoreList) {
          newValues.custList = values.custList.concat(values.custMoreList);
        } else {
          newValues.custList = values.custList.concat([]);
        }
        delete newValues.custMoreList;
        const params = this.handleInparam(newValues);

        dispatch({
          type: 'injuryware/injuryUpdate',
          payload: params,
        }).then(res => {
          if (res && res.success) {
            router.goBack();
          } else {
            message.warning(res.message || '服务端错误');
          }
        });
      }
    });
  };

  // 新增
  addList = () => {
    const { listIndex } = this.state;
    const {
      injuryware: { detailInfo },
      injuryware: {
        detailInfo: { useTaxFlag },
      },
      dispatch,
    } = this.props;
    const newData = detailInfo.ratioList.map(item => ({ ...item }));
    let tempDate;
    let newTemData;
    if (!newData[0] || !newData[0].beginYm) {
      tempDate = moment(new Date()).format('YYYYMM');
      newTemData = moment(new Date()).format('YYYYMM');
    } else {
      newTemData = moment(newData[0].beginYm, 'YYYY-MM')
        .date(32)
        .format('YYYYMM');
      if (String(useTaxFlag) === '1') {
        tempDate = `${Number(moment(`${newData[0].beginYm}01`).format('YYYY')) + 1}01`;
      } else {
        tempDate =
          moment(new Date()).format('YYYYMM') > newTemData
            ? moment(new Date()).format('YYYYMM')
            : newTemData;
      }
    }
    newData.unshift({
      key: `list_${listIndex}`,
      // 有基准费率时, 新增默认值为上一次的值加1年，不使用基准费率时，新增默认值为上一次的值加1月
      beginYm: tempDate,
      endYm: `${tempDate.substring(0, 4)}12`,
      floatFeeRatio: null,
      beginDisDate: `${tempDate}01`,
      rangeDate: newTemData,
    });
    this.state.listIndex += 1;
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        detailInfo: {
          ...detailInfo,
          ratioList: newData,
        },
      },
    });
  };

  // 开始年月发生改变时
  dataTimelist = (date, record, index) => {
    const {
      injuryware: { detailInfo },
      dispatch,
    } = this.props;
    const newData = detailInfo.ratioList.map(item => ({ ...item }));
    newData.map((item, idx) => {
      const newItem = item;
      if (Number(index) === idx) {
        newItem.beginYm = moment(date).format('YYYYMM');
        newItem.beginDisDate = moment(date).format('YYYYMMDD');
      }
      return true;
    });
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        detailInfo: {
          ...detailInfo,
          ratioList: newData,
        },
      },
    });
  };

  dateChange = (date, record, index) => {
    const {
      injuryware: { detailInfo },
      dispatch,
    } = this.props;
    const newData = detailInfo.ratioList.map(item => ({ ...item }));
    newData.map((item, idx) => {
      const newItem = item;
      if (Number(index) === idx) {
        newItem.endYm = moment(date).format('YYYYMM');
      }
      return true;
    });
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        detailInfo: {
          ...detailInfo,
          ratioList: newData,
        },
      },
    });
  };

  custName = name => {
    const { dispatch } = this.props;
    dispatch({
      type: 'injuryware/editCustName',
      payload: {
        name,
      },
    });
  };

  dataSlist = (e, record, index) => {
    const {
      dispatch,
      injuryware: { detailInfo },
    } = this.props;
    const newData = detailInfo.ratioList.map(item => ({ ...item }));
    newData.forEach((item, idx) => {
      const newItem = item;
      if (Number(index) === idx) {
        newItem.floatFeeRatio = e;
      }
    });
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        detailInfo: {
          ...detailInfo,
          ratioList: newData,
        },
      },
    });
  };

  bigChange = (value, item) => {
    const {
      dispatch,
      injuryware: { detailInfo },
    } = this.props;
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        detailInfo: {
          ...detailInfo,
          insAccoName: item.props.children,
          insAccoId: value,
        },
      },
    });
  };

  disabledDate = (startValue, limitDate) => {
    const {
      injuryware: { detailInfo },
    } = this.props;
    let tempLimitDate = limitDate;
    const newData = detailInfo.ratioList.map(item => ({ ...item }));
    if (!startValue) {
      return false;
    }
    if (newData.length === 1) {
      return false;
    }
    if (newData.length === 2 && !newData[1].beginYm) {
      return false;
    }
    if (newData.length > 2) {
      tempLimitDate = moment(`${newData[1].beginYm}01`)
        .add(1, 'months')
        .format('YYYYMM');
    }
    return startValue.valueOf() < moment(tempLimitDate).valueOf();
  };

  accountCompletion = value => {
    this.setState({
      doneFlag: value,
    });
  };

  remove(keys) {
    const {
      dispatch,
      injuryware: { detailInfo },
    } = this.props;
    if (keys.key) {
      const newData = detailInfo.ratioList.filter(item => item.key !== keys.key);
      dispatch({
        type: 'injuryware/updateModelData',
        payload: {
          detailInfo: {
            ...detailInfo,
            ratioList: newData,
          },
        },
      });
    }
  }

  renderDoneFlag = () => {
    const {
      injuryware: {
        detailInfo: { state },
      },
    } = this.props;
    const { initDoneFlag } = this.state; // 是否开户
    const flag = Number(initDoneFlag) === 1 && Number(state) === 2;
    return !flag ? this.renderFullDone() : this.renderSimpleDone();
  };

  renderSimpleDone = () => {
    const {
      form: { getFieldDecorator },
      injuryware: {
        bigResult,
        detailFormFieldsValue,
        comList,
        detailInfo: { state, ratioList, useTaxFlag },
      },
      loading,
    } = this.props;

    const { fieldsStyle, feeRatioFlag } = this.state;
    const startData = (record, index) => {
      if (
        // (String(useTaxFlag) === '2' && index !== 0) ||
        index !== 0 ||
        (record.injSecAccoId && Number(state) !== 1)
      ) {
        return true;
      }
      if (String(useTaxFlag) === '2' && Number(state) === 1 && ratioList.length === 1) {
        // if (Number(state) === 1 && ratioList.length === 1) {
        return true;
      }
      return false;
    };
    const columns = [
      {
        title: '浮动费率(%)', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
        dataIndex: 'floatFeeRatio',
        key: 'floatFeeRatio',
        width: '15%',
        render: (text, record, index) => (
          <InputNumber
            value={text}
            min={0}
            max={99.9999}
            precision={4}
            placeholder="请输入浮动费率"
            style={{ width: '100%' }}
            onChange={e => this.dataSlist(e, record, index)}
          />
        ),
      },
      {
        title: '开始年月', // disabled={index == (this.state.dataSource.length - 1)}disabled={record.updateFlag== 2?true:false}
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: (text, record, index) => (
          <MonthPicker
            placeholder="请选择"
            format="YYYY-MM"
            style={{ width: '100%' }}
            value={text ? moment(text, 'YYYY-MM') : null}
            disabled={startData(record, index)}
            disabledDate={startValue => this.disabledDate(startValue, record.rangeDate)}
            allowClear={false}
            onChange={date => this.dataTimelist(date, record, index)}
          />
        ),
      },
      // {
      //   title: '结束年月', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
      //   dataIndex: 'endYm',
      //   key: 'endYm',
      //   width: '15%',
      //   render: (text, record, index) => (
      //     // console.log(record);
      //     <MonthPicker
      //       placeholder="请选择"
      //       format="YYYY-MM"
      //       style={{ width: '100%' }}
      //       value={text ? moment(text, 'YYYY-MM') : null}
      //       disabled={index !== 0 || (record.injSecAccoId && Number(state) !== 1)}
      //       disabledDate={startValue => this.disabledDate(startValue, record.beginDisDate)}
      //       allowClear={false}
      //       onChange={date => this.dateChange(date, record, index)}
      //     />
      //   ),
      // },

      {
        title: '操作',
        key: 'action',
        width: '15%',
        render: (text, record, index) => {
          if (
            (String(useTaxFlag) === '2' && Number(state) === 1 && index !== 0) ||
            (String(useTaxFlag) === '2' && Number(state) === 1 && ratioList.length === 1)
          ) {
            return null;
          }
          if (index !== 0 || (record.injSecAccoId && Number(state) !== 1)) {
            return null;
          }
          return (
            <span>
              <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record)}>
                <a>删除</a>
              </Popconfirm>
            </span>
          );
        },
      },
    ];
    const comOption = comList.map(value => (
      <Option key={value.mdCustId} value={value.mdCustId}>
        {value.name}
      </Option>
    ));
    const bigChildren = bigResult.map(email => (
      <Option key={email.insAccoId}>{email.accoName}</Option>
    ));
    return (
      <Fragment>
        <Row gutter={64}>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
            <FormItem label="所属大库">
              {getFieldDecorator('insAccoName', {
                rules: [{ required: true, message: '请输入所属大库' }],
                initialValue: detailFormFieldsValue.insAccoName,
              })(
                <Select
                  style={{ width: '100%' }}
                  placeholder="请选择大库名称"
                  onChange={this.bigChange}
                  disabled={Number(state) !== 1}
                >
                  {bigChildren}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
            <FormItem label="二级户名称">
              {getFieldDecorator('injSecAccoName', {
                rules: [{ required: true, pattern:/^(?!\.)[^\\/:*?"<>|]{1,255}$/,message: '文件名不能包含下列任何字符  \\  /  :  *   ?  "  <  >  |'}],
                initialValue: detailFormFieldsValue.injSecAccoName,
              })(<Input placeholder="请输入二级户名称" maxLength={25} />)}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24} className={fieldsStyle}>
            <FormItem label="二级户编码">
              {getFieldDecorator('injSecAccoCode', {
                rules: [
                  { required: true, message: '请输入二级户编码(纯数字)', pattern: /^[0-9]*$/ },
                ],
                initialValue: detailFormFieldsValue.injSecAccoCode,
              })(
                <InputNumber maxLength={12} placeholder="请输入纯数字" style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24} className={feeRatioFlag}>
            <FormItem label="基准费率(%)">
              {getFieldDecorator('feeRatio', {
                rules: [
                  {
                    required: true && useTaxFlag === '1',
                    message: '请输入小数点不超过4位基准费率',
                    // pattern: /^[0-9]{0,7}(\.[0-9]{1,4})?$/,
                    pattern: /^([1-9][0-9]*(\.[0-9]{1,4})?|0\.(?!0+$)[0-9]{1,4})$/,
                  },
                ],
                initialValue: detailFormFieldsValue.feeRatio,
              })(
                // <InputNumber
                //   min={0.0001}
                //   max={99.9999}
                //   precision={4}
                //   placeholder="请输入基准费率"
                //   style={{ width: '100%' }}
                // />
                <InputNumber placeholder="请输入基准费率" style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col>

          <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
            <FormItem label="关联客户名称">
              {getFieldDecorator('custList', {
                rules: [{ required: true, message: '请选择关联客户' }],
                initialValue: detailFormFieldsValue.custList,
              })(
                <Select
                  mode="multiple"
                  labelInValue
                  filterOption={false}
                  onSearch={this.custName}
                  style={{ width: '100%' }}
                  notFoundContent={loading ? <Spin size="small" /> : null}
                  placeholder="请输入关键字搜索关联客户名称"
                  disabled={Number(state) !== 1}
                >
                  {comOption}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
            <FormItem label="备注">
              {getFieldDecorator('remark', {
                initialValue: detailFormFieldsValue.remark,
              })(<Input placeholder="请输入备注" maxLength={100} />)}
            </FormItem>
          </Col>
          <div style={{ clear: 'both' }} />
          {Number(state) !== 1 && (
            <Col xl={{ span: 16 }} lg={16} md={16} sm={24}>
              <FormItem label="继续关联客户名称">
                {getFieldDecorator('custMoreList', {
                  initialValue: detailFormFieldsValue.custMoreList,
                  rules: [{ required: false, message: '请选择关联客户' }],
                })(
                  <Select
                    mode="multiple"
                    labelInValue
                    filterOption={false}
                    onSearch={this.custName}
                    style={{ width: '100%' }}
                    notFoundContent={loading ? <Spin size="small" /> : null}
                    placeholder="请输入关键字搜索关联客户名称"
                  >
                    {comOption}
                  </Select>
                )}
              </FormItem>
            </Col>
          )}
        </Row>
        <h3 className={fieldsStyle}>浮动费率信息</h3>
        <Divider className={fieldsStyle} />
        <Row className={fieldsStyle} gutter={64}>
          <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
            <Button
              style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
              type="dashed"
              onClick={this.addList}
              icon={<PlusOutlined />}
            >
              添加浮动费率
            </Button>
            <Table
              columns={columns}
              dataSource={ratioList}
              pagination={false} // 分页
              rowClassName={styles.editableRow}
              rowKey={record => record.floatFeeRatioId}
            />
          </Col>
        </Row>
      </Fragment>
    );
  };

  renderFullDone = () => {
    const {
      form: { getFieldDecorator },
      injuryware: {
        bigResult,
        yesNoFlag,
        comList,
        detailInfo: { state, ratioList, useTaxFlag },
        detailFormFieldsValue,
      },
      loading,
    } = this.props;
    const { accountCompletionStyle, fieldsStyle, mustFlag, feeRatioFlag } = this.state;
    const startData = (record, index) => {
      if (
        // (String(useTaxFlag) === '2' && index !== 0) ||
        index !== 0 ||
        (record.injSecAccoId && Number(state) !== 1)
      ) {
        return true;
      }
      // useTaxFlag: 1:使用基准费率 2：不使用基准费率
      if (String(useTaxFlag) === '2' && Number(state) === 1 && ratioList.length === 1) {
        // if (Number(state) === 1 && ratioList.length === 1) {
        return true;
      }
      return false;
    };
    const columns = [
      {
        title: '浮动费率(%)', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
        dataIndex: 'floatFeeRatio',
        key: 'floatFeeRatio',
        width: '15%',
        render: (text, record, index) => (
          <InputNumber
            value={text}
            min={0}
            max={99.9999}
            precision={4}
            placeholder="请输入浮动费率"
            style={{ width: '100%' }}
            onChange={e => this.dataSlist(e, record, index)}
          />
        ),
      },
      {
        title: '开始年月', // disabled={index == (this.state.dataSource.length - 1)}disabled={record.updateFlag== 2?true:false}
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: (text, record, index) => (
          <MonthPicker
            placeholder="请选择"
            format="YYYY-MM"
            style={{ width: '100%' }}
            value={text ? moment(text, 'YYYY-MM') : null}
            disabled={startData(record, index)}
            // disabled={index !== 0 || (record.injSecAccoId && Number(state) !== 1)}
            disabledDate={startValue => this.disabledDate(startValue, record.rangeDate)}
            allowClear={false}
            onChange={date => this.dataTimelist(date, record, index)}
          />
        ),
      },
      // {
      //   title: '结束年月', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
      //   dataIndex: 'endYm',
      //   key: 'endYm',
      //   width: '15%',
      //   render: (text, record, index) => (
      //     // console.log(record);
      //     <MonthPicker
      //       placeholder="请选择"
      //       format="YYYY-MM"
      //       style={{ width: '100%' }}
      //       value={text ? moment(text, 'YYYY-MM') : null}
      //       disabled={index !== 0 || (record.injSecAccoId && Number(state) !== 1)}
      //       disabledDate={startValue => this.disabledDate(startValue, record.beginDisDate)}
      //       allowClear={false}
      //       onChange={date => this.dateChange(date, record, index)}
      //     />
      //   ),
      // },
      {
        title: '操作',
        key: 'action',
        width: '15%',
        //  className: String(useTaxFlag) === '1'? styles.hide : styles.show,
        render: (text, record, index) => {
          if (
            (String(useTaxFlag) === '2' && Number(state) === 1 && index !== 0) ||
            (String(useTaxFlag) === '2' && Number(state) === 1 && ratioList.length === 1)
          ) {
            return null;
          }
          if (index !== 0 || (record.injSecAccoId && Number(state) !== 1)) {
            return null;
          }
          return (
            <span>
              <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record)}>
                <a>删除</a>
              </Popconfirm>
            </span>
          );
        },
        // console.log(index);
        // index !== 0 || (record.injSecAccoId && Number(state) !== 1) ? null : (
        //   <span>
        //     <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record)}>
        //       <a>删除</a>
        //     </Popconfirm>
        //   </span>
        // ),
      },
    ];
    const comOption = comList.map(value => (
      <Option key={value.mdCustId} value={value.mdCustId}>
        {value.name}
      </Option>
    ));
    const bigChildren = bigResult.map(email => (
      <Option key={email.insAccoId}>{email.accoName}</Option>
    ));
    return (
      <Fragment>
        <Row gutter={64}>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
            <FormItem label="所属大库">
              {getFieldDecorator('insAccoName', {
                rules: [{ required: true, message: '请输入所属大库' }],
                initialValue: detailFormFieldsValue.insAccoName,
              })(
                <HOCSelect
                  style={{ width: '100%' }}
                  placeholder="请选择大库名称"
                  onChange={this.bigChange}
                  disabled={Number(state) !== 1}
                >
                  {bigChildren}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
            <FormItem label="二级户名称">
              {getFieldDecorator('injSecAccoName', {
                rules: [{ required: true, pattern:/^(?!\.)[^\\/:*?"<>|]{1,255}$/,message: '文件名不能包含下列任何字符  \\  /  :  *   ?  "  <  >  |'}],
                initialValue: detailFormFieldsValue.injSecAccoName,
              })(<Input placeholder="请输入二级户名称" maxLength={25} />)}
            </FormItem>
          </Col>
          <Col sm={24} md={8} lg={8} xl={8} className={accountCompletionStyle}>
            <FormItem label="是否开户完成">
              {getFieldDecorator('doneFlag', {
                rules: [{ required: true, message: '请选择是否开户完成' }],
                initialValue: detailFormFieldsValue.doneFlag,
              })(
                <HOCSelect
                  style={{ width: '100%' }}
                  placeholder="请选择是否开户完成"
                  onChange={this.accountCompletion}
                >
                  {yesNoFlag.map(value => (
                    <Option value={Number(value.itemCode)} key={value.itemCode}>
                      {value.itemName}
                    </Option>
                  ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={64}>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24} className={fieldsStyle}>
            <FormItem label="二级户编码">
              {getFieldDecorator('injSecAccoCode', {
                rules: [
                  {
                    required: mustFlag,
                    message: '请输入二级户编码(纯数字)',
                    pattern: /^[0-9]*$/,
                  },
                ],
                initialValue: detailFormFieldsValue.injSecAccoCode,
              })(
                <InputNumber maxLength={12} placeholder="请输入纯数字" style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24} className={feeRatioFlag}>
            <FormItem label="基准费率(%)">
              {getFieldDecorator('feeRatio', {
                rules: [
                  {
                    required: mustFlag && useTaxFlag === '1',
                    message: '请输入小数点不超过4位基准费率',
                    // pattern: /^[0-9]{0,7}(\.[0-9]{1,4})?$/,
                    pattern: /^([1-9][0-9]*(\.[0-9]{1,4})?|0\.(?!0+$)[0-9]{1,4})$/,
                  },
                ],
                initialValue: detailFormFieldsValue.feeRatio,
              })(
                // <InputNumber
                //   min={0.0001}
                //   max={99.9999}
                //   precision={4}
                //   placeholder="请输入基准费率"
                //   style={{ width: '100%' }}
                // />
                <InputNumber placeholder="请输入基准费率" style={{ width: '100%' }} />
              )}
            </FormItem>
          </Col>

          <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
            <FormItem label="关联客户名称">
              {getFieldDecorator('custList', {
                rules: [{ required: true, message: '请选择关联客户' }],
                initialValue: detailFormFieldsValue.custList,
              })(
                <HOCSelect
                  mode="multiple"
                  labelInValue
                  filterOption={false}
                  onSearch={this.custName}
                  style={{ width: '100%' }}
                  notFoundContent={loading ? <Spin size="small" /> : null}
                  placeholder="请输入关键字搜索关联客户名称"
                  disabled={Number(state) !== 1}
                >
                  {comOption}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
            <FormItem label="备注">
              {getFieldDecorator('remark', {
                initialValue: detailFormFieldsValue.remark,
              })(<Input placeholder="请输入备注" maxLength={100} />)}
            </FormItem>
          </Col>
          <div style={{ clear: 'both' }} />
          {Number(state) !== 1 && (
            <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
              <FormItem label="继续关联客户名称">
                {getFieldDecorator('custMoreList', {
                  rules: [{ required: false, message: '请选择关联客户' }],
                  initialValue: detailFormFieldsValue.custMoreList,
                })(
                  <HOCSelect
                    mode="multiple"
                    labelInValue
                    filterOption={false}
                    onSearch={this.custName}
                    style={{ width: '100%' }}
                    notFoundContent={loading ? <Spin size="small" /> : null}
                    placeholder="请输入关键字搜索关联客户名称"
                  >
                    {comOption}
                  </HOCSelect>
                )}
              </FormItem>
            </Col>
          )}
        </Row>
        <h3 className={fieldsStyle}>浮动费率信息</h3>
        <Divider className={fieldsStyle} />
        <Row className={fieldsStyle} gutter={64}>
          <Col xl={{ span: 16 }} lg={{ span: 16 }} md={{ span: 16 }} sm={24}>
            <Button
              style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
              type="dashed"
              onClick={this.addList}
              icon={<PlusOutlined />}
            >
              添加浮动费率
            </Button>
            <Table
              columns={columns}
              dataSource={ratioList}
              pagination={false} // 分页
              rowClassName={styles.editableRow}
              rowKey={record => record.floatFeeRatioId}
            />
          </Col>
        </Row>
      </Fragment>
    );
  };

  // 渲染函数
  render() {
    const { doneFlag } = this.state;
    let accountCompletionStyle = '';
    let fieldsStyle = '';
    let mustFlag = true;
    const {
      injuryware: { detailInfo },
    } = this.props;
    let feeRatioFlag = 'hide';
    if (Number(doneFlag) === 2) {
      accountCompletionStyle = 'show';
      fieldsStyle = 'hide';
      mustFlag = false;
    } else {
      accountCompletionStyle = 'show';
      fieldsStyle = 'show';
      if (detailInfo.useTaxFlag === '1') {
        feeRatioFlag = 'show';
      }
      mustFlag = true;
    }
    this.setState({
      accountCompletionStyle,
      fieldsStyle,
      mustFlag,
      feeRatioFlag,
    });
    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Card title={<span>工伤二级户信息</span>} bordered={false}>
            {this.renderDoneFlag()}
          </Card>

          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={this.cancel}> 取消 </Button>
            <Button type="primary" onClick={this.submitAll}>
              提交
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Form>
    );
  }
}

export default AdvancedForm;
